import { useState } from 'react';
import { useRouter } from 'next/router';
import axios from 'axios';

const RegisterPage: React.FC = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [permission, setPermission] = useState('asker'); // 默认选择asker
    const [error, setError] = useState('');
    const router = useRouter();

    const handleRegister = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            // 注册用户
            await axios.post('http://localhost:8000/api/roles', {
                username,
                password,
                permission,
            });

            // 直接登录
            const loginResponse = await axios.post('http://localhost:8000/api/login', {
                username,
                password,
                permission,
            });
            
            localStorage.setItem('token', loginResponse.data.token);
            localStorage.setItem('permission', permission);
            localStorage.setItem('username', loginResponse.data.username);
            localStorage.setItem('userId', loginResponse.data.userId.toString());
            
            // 根据权限跳转到不同的dashboard
            if (permission === 'asker') {
                router.push('/askerdashboard');
            } else if (permission === 'replyer') {
                router.push('/replyerdashboard');
            }
        } catch (err) {
            setError('注册失败，该用户名可能已存在。');
        }
    };

    return (
        <div className="register-container" style={{
            maxWidth: '400px',
            margin: '50px auto',
            padding: '20px',
            boxShadow: '0 0 10px rgba(0,0,0,0.1)',
            borderRadius: '8px'
        }}>
            <h1 style={{textAlign: 'center', marginBottom: '30px'}}>注册</h1>
            <form onSubmit={handleRegister} style={{display: 'flex', flexDirection: 'column', gap: '15px'}}>
                <input
                    type="text"
                    placeholder="用户名"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                    required
                    style={{
                        padding: '10px',
                        borderRadius: '4px',
                        border: '1px solid #ddd'
                    }}
                />
                <input
                    type="password"
                    placeholder="密码"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                    style={{
                        padding: '10px',
                        borderRadius: '4px',
                        border: '1px solid #ddd'
                    }}
                />
                <select
                    value={permission}
                    onChange={(e) => setPermission(e.target.value)}
                    style={{
                        padding: '10px',
                        borderRadius: '4px',
                        border: '1px solid #ddd'
                    }}
                >
                    <option value="asker">提问者</option>
                    <option value="replyer">回复者</option>
                </select>
                <button 
                    type="submit"
                    style={{
                        padding: '10px',
                        backgroundColor: '#28a745',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer'
                    }}
                >
                    注册并登录
                </button>
                <button 
                    type="button"
                    onClick={() => router.push('/login')}
                    style={{
                        padding: '10px',
                        backgroundColor: '#6c757d',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer'
                    }}
                >
                    返回登录
                </button>
            </form>
            {error && <p style={{color: 'red', marginTop: '10px', textAlign: 'center'}}>{error}</p>}
        </div>
    );
};

export default RegisterPage; 